<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>微信安全支付-{:C('c_title')}</title>
        <link rel="stylesheet" type="text/css" href="__CSS__/home/68ecshop_common.css" />
        <link rel="stylesheet" type="text/css" href="__CSS__/powerange.css"/>
        <script src="__JQ__"></script>
        <script src="__JS__/layer/layer.js" type="text/javascript" charset="utf-8"></script>
        <script src="__JS__/powerange.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .main{background-color: #ecedf2;padding-bottom: 50px;margin-top: 50px}
            .w{width: 990px;margin: 0 auto;overflow: hidden;}
            .order{overflow: hidden;position: relative;}
            .order .o-left{float: left;width: 635px;padding-top: 25px;padding-bottom: 10px;}
            .order .o-right{float: right;width: 300px;padding-top: 25px;padding-bottom: 10px;padding-right: 25px;overflow: hidden;}
            .payment{overflow: hidden;background-color: #fff;padding: 12px 30px 0;-moz-box-shadow: 0 0 6px rgba(0,0,0,.2);-webkit-box-shadow: 0 0 6px rgba(0,0,0,.2);box-shadow: 0 0 6px rgba(0,0,0,.2);-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
            .p-w-bd, .pay-weixin{zoom: 1;overflow: hidden;}
            .p-w-hd{margin-bottom: 20px;font-size: 18px;font-family: "Microsoft Yahei";}
            .p-w-bd{padding-left: 130px;margin-bottom: 30px;}
            .font-red{color: #ff5d5b;}
            .p-w-box{float: left;width: 300px;}
            .p-w-sidebar{float: left;width: 379px;height: 421px;padding-left: 50px;margin-top: -20px;background: url(../Public/img/phone-bg.png) 50px 0 no-repeat;}
            .pw-box-hd{margin-bottom: 20px;}
            .pw-box-ft{height: 60px;padding: 8px 0 8px 125px;background: url(../Public/img/icon-red.png) 50px 8px no-repeat #f43e91;line-height: 23px;color: #fff;}
            .order .o-title{line-height: 26px;height: 26px;overflow: hidden;font-size: 18px;}
            .order .o-tips{line-height: 20px;height: 20px;color: #f43e91;}
            .order .o-price{text-align: right;line-height: 26px;margin-bottom: 4px;font-size: 18px;font-weight: bold;}
            .order .o-price em{vertical-align: bottom;}
            .p-w-hd{margin-bottom: 20px;font-size: 18px;font-family: "Microsoft Yahei";}
            .order .o-price strong{font-size: 18px;vertical-align: bottom;color: #ff5d5b;margin: 0 3px;}
            .payment-change .pc-wrap{display: block;height: 60px;line-height: 56px;padding: 0 20px;-moz-transition: all .1s;-o-transition: all .1s;-webkit-transition: all .1s;transition: all .1s;}
            .payment-change .pc-wrap .pc-w-arrow-left{float: left;margin-right: 15px;}
            .payment-change .pc-wrap strong{color: #2ea7e7;margin-right: 30px;font-size: 16px;float: left;cursor: pointer;}
            .order .o-price em{vertical-align: bottom;}
            em{font-style: normal;}
        </style>
    </head>
    <body>
        <include file="Public/head_a" />
        <include file="Public/head_b" />
        <div class="main">
            <div class="w">
                <!-- order 订单信息 -->
                <div class="order">
                    <div class="o-left">
                        <h3 class="o-title" style="font-size:18px;">支付流水号：<span class="price">{$pay['trade_no']}</span></h3>
                    </div>
                    <div class="o-right">
                        <div class="o-price">
                            <em>您已成功付款！实付金额</em><strong>{$pay['payment']}</strong><em>元</em>
                        </div>
                    </div>
                    <div class="clr"></div>

                    <div class="o-list j_orderList" id="listPayOrderInfo">
                        <!-- 单笔订单 -->
                        <div class="o-list-info">
                            <span class="mr10" id="shdz"></span>
                            <span class="mr10" id="shr"></span>
                            <span id="mobile"></span>
                        </div>
                        <div class="o-list-info">
                            <span id="spmc"></span>
                        </div>
                    </div>        
                </div>
                <!-- order 订单信息 end -->
                <!-- payment 支付方式选择 -->
                <div class="payment">
                    <!-- 微信支付 -->
                    <div class="pay-weixin">
                        <div class="p-w-hd">订单详情：</div>
                        <div class="p-w-bd" style="position:relative">
                            <div class="p-w-box">
                                <!--订单详情-->
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>订单号</th>
                                            <th>卖家</th>
                                            <th>金额</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{$pay['trade_id']}</td>
                                            <td>{$pay['uid']}</td>
                                            <td class="price"><em>￥</em>{$pay['total']}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!--/订单详情-->
                            </div>
                        </div>
                        <!--滑动抽奖-->
                        <div class="">
                            <div class="" style="text-align: center;margin-bottom: 10px;">
                                快来滑动抽奖吧
                            </div>
                            <div class="slider-wrapper" style="width: 500px;margin: 0 auto;margin-bottom: 30px;">
                                <input type="text" class="js-hiderange" style="display: none;">
                            </div>
                        </div>

                    </div>
                    <!-- 微信支付 end -->
                </div>
                <!-- payment 支付方式选择 end -->

            </div>
        </div>

        <!--/内容区-->
        <!--脚部-->
        <!--公共底部-->
        <div style="clear: both"></div>
        <div class="site-footer">
            <div class="footer-related">
                <include file="Public/bootom_a" />
                <include file="Public/bootom_b" />
                <include file="Public/bootom_c" />
            </div>
        </div>
        <!--/脚部--> 
    </body>
</html>
<script type="text/javascript">
    var hide = document.querySelector('.js-hiderange');
    var initHideRange = new Powerange(hide, {
        hideRange: true, //是否显示数字进度
        start: 0, //初始位置
        callback: function () {
            if (hide.value == 100) {
                $(".range-handle").css({
                    left: "auto",
                    right: "0",
                })
                $(".slider-wrapper").html($(".slider-wrapper").clone());
                $.ajax({
                    url: "{:U('Public/wheelApi')}",
                    data: {"id": "4"},
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        if (data.msg) {
                            layer.msg(data.msg);
                        } else {
                            $(".range-quantity").html(data.txt);
                        }
                    }
                })
            }
        }
    });
</script>
